<script setup>
import { reactive, watch, computed } from "vue";

const props = defineProps({
  loading: {
    type: Boolean,
    default: () => false,
  },
  list: {
    type: Array,
    default: () => [],
  },
  height: {
    type: [String, Number],
    default: () => "100%",
  },
  columns: {
    type: Array,
    default: () => [],
  },
  bgColor: {
    type: String,
    default: () => "rgb(245,247,250)",
  },
  maxHeight: {
    type: Number,
    default: () => 660,
  },
});
const emit = defineEmits([
  "changeSelection",
  "changeCurrent",
  "command",
  "clickCell",
]);
const channelText = (val) => {
  switch (val) {
    case 1:
      return "微信";
    case 2:
      return "京东";
    case 3:
      return "天猫";
    default:
      return "";
  }
};

const setTime = (num) => {
  if (!num) return "";
  const date = new Date(num);

  // 获取年、月、日
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");

  // 获取时、分、秒
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const state = reactive({
  tableData: props.list,
  columns: props.columns,
  tableLayout: "fixed",
  treeProps: {
    children: "children",
    hasChildren: "hasChildren",
  },
});

const handleChange = (command, scope) => {
  emit("command", command, scope);
};

const clickCell = (row, column, cell, event) => {
  emit("clickCell", row, column, cell, event);
};

watch(
  () => props.list,
  (val) => {
    state.tableData = val;
  },
  {
    deep: true,
  }
);
watch(
  () => props.columns,
  (val) => {
    state.columns = val;
  },
  {
    deep: true,
  }
);
</script>

<template>
  <el-table
    v-loading="loading"
    :data="props.list"
    @cell-click="clickCell"
    :header-cell-style="{ background: props.bgColor }"
  >
    <template v-for="(col, index) in props.columns" :key="index">
      <el-table-column
        v-if="col.prop === 'operation'"
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :width="col.width"
      >
        <template #default="scope">
          <template v-for="(t, idx) in col.operation" :key="idx">
            <el-button
              :size="t.size"
              :text="t.text"
              :type="t.type"
              @click="handleChange(scope.row, t)"
              >{{ t.character }}</el-button
            >
          </template>
        </template>
      </el-table-column>

      <el-table-column
        v-else-if="col.prop === 'channel'"
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :width="col.width"
      >
        <template #default="scope">
          {{ channelText(scope.row["channel"]) }}
        </template>
      </el-table-column>

      <el-table-column
        v-else-if="col.prop === 'updateTime' || col.prop === 'createTime'"
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :width="col.width"
      >
        <template #default="scope">
          {{
            setTime(
              col.prop === "updateTime"
                ? scope.row.updateTime
                : scope.row.createTime
            )
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.prop === 'showLogo'"
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :width="col.width"
      >
        <template #default="scope">
          <span :class="scope.row['showLogo'] ? 'show-status' : 'hide-status'">
            {{ scope.row["showLogo"] ? "显示" : "隐藏" }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        v-else-if="col.imgShow"
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :width="col.width"
      >
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row[col.prop]"
            fit="cover"
          />
        </template>
      </el-table-column>

      <el-table-column
        v-else
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :width="col.width"
      >
      </el-table-column>
    </template>
  </el-table>
</template>

<style lang="less" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.onsale-class {
  border: 1px solid #409eff;
  border-radius: 4px;
  background-color: #409eff;
  color: #ffffff;
}

.instock-class {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #59594f38;
}

.show-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #409eff;
  color: #ffffff;
  font-size: 12px;
}

.hide-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #909399;
  color: #ffffff;
  font-size: 12px;
}
</style>

